<!--{template mobile/frame/header_simple_start}-->
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/mobile/share.css?{VERHASH}" />
<!--{template mobile/frame/header_simple_end}-->
<div id="dzzoffice">
	<div
		id="DetailPopup"
		class="detail-popup-box" 
		:class="imagesData.footer?'':'NotFooter'">
		<van-nav-bar>
			<template #left>
				<div class="pic-logo" slot="left">
					<a class="h-left" href="{MOD_URL}">
						<img src="data/attachment/sitelogo/sitelogo.png?{VERHASH}" alt="">
						<span class="text">$_G['setting'][sitename]</span>
					</a>
				</div>
			</template>
			<template #right>
				<div style="width: 25px;text-align: center;height: 25px;line-height: 25px;" @click.stop="PopupInformation=true">
					<van-icon name="warning-o" size="18" />
				</div>
			</template>
		</van-nav-bar>
		<div class="detail-popup-translate">
			<div class="detail-popup-content">
				<div class="detail-popup-img">
					<div class="detail-between">
						<template v-if="imagesData.opentype=='video'">
							<div class="video-box" :style="{'height':imagesData.videoH+'px'}">
								<iframe
									style="border: 0px;"
									:src="'index.php?mod=xgplayer&path='+imagesData.dpath" 
									width="100%" 
									height="100%"></iframe>
							</div>
						</template>
						<template v-else-if="imagesData.opentype=='pdf'">
							<iframe
								style="border: 0px;"
								:src="'index.php?mod=pdf&path='+imagesData.dpath" 
								width="100%" 
								height="100%"></iframe>
						</template>
						<template v-else-if="imagesData.opentype=='text'">
							<div style="padding: 10px;height: 100%;">
								<iframe
									style="border: 0px;border-radius: 18px;"
									:src="'index.php?mod=textviewer&path='+imagesData.dpath" 
									width="100%" 
									height="100%"></iframe>
							</div>
						</template>
						<template v-else-if="imagesData.opentype=='other'">
							<div class="img-box">
								<img 
									@load="DetailImgload" 
									:src="imagesData.icondata" 
									class="image-viewer__img opacity" />
							</div>
						</template>
						<template v-else>
							<div class="img-box">
								<img :src="imagesData.icondata" class="image-viewer__img thumbnail" />
								<img 
									@load="DetailImgload" 
									:src="imagesData.originalimg" 
									class="image-viewer__img opacity" />
							</div>
						</template>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-tabbar" v-if="imagesData.footer">
			<div class="footer-tabbar-item" v-if="imagesData.link" @click="DetailFooterClick('link')">
				<i class="ri-links-line"></i>
			</div>
			<div class="footer-tabbar-item" v-if="imagesData.download" @click="DetailFooterClick('download')">
				<i class="ri-download-2-line"></i>
			</div>
			<div class="footer-tabbar-item" v-if="imagesData.share" @click="DetailFooterClick('share')">
				<i class="ri-share-line"></i>
			</div>
		</div>
		
		
		<van-popup
			v-model="PopupInformation" 
			class="detail-popup-message"
			:class="imagesData.footer?'':'NotFooter'"
			position="right" 
			:overlay="false" 
			get-container="#DetailPopup">
			<div style="position: relative;height: 100%;background: var(--bg-content);padding-top: 2.875rem;">
				<van-nav-bar title="详情信息" left-arrow @click-left="PopupInformation=false"></van-nav-bar>
				<div class="DetailPopup-content" style="padding: 0 16px;">
					<div class="name">{{imagesData.name}}.{{imagesData.ext}}</div>
					<div class="block" v-if="imagesData.colors && imagesData.colors.length">
						<div class="title">颜色</div>
						<div class="block-item colors">
							<div class="colors" v-for="item in imagesData.colors">
								<div :style="{background: '#'+item}"></div>
							</div>
						</div>
					</div>
					<div class="block" v-if="imagesData.tag && imagesData.tag.length">
						<div class="title">标签</div>
						<div class="block-item tag">
							<div class="tag" v-for="item in imagesData.tag">{{item}}</div>
						</div>
					</div>
					<div class="block" v-if="imagesData.link">
						<div class="title">链接</div>
						<div class="block-item link">
							<span>{{imagesData.link}}</span>
							<i class="ri-file-copy-line" @click="CommonCopyTxt(imagesData.link)"></i>
						</div>
					</div>
					<div class="block" v-if="imagesData.foldernames && imagesData.foldernames.length">
						<div class="title">分类</div>
						<div class="block-item tag">
							<div class="tag" v-for="item in imagesData.foldernames">{{item}}</div>
						</div>
					</div>
					<div class="block">
						<div class="title">基本信息</div>
						<div class="block-item">
							<van-row class="basic">
								<van-col span="12">
									<div class="label">评分</div>
								</van-col>
								<van-col span="12">
									<div class="record">
										<van-icon v-for="item in imagesData.grade" name="star" class="star active"></van-icon><van-icon v-for="item in imagesData.fgrade" name="star" class="star"></van-icon>
									</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">尺寸</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.width}}×{{imagesData.height}}</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">文件大小</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.fsize}}</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">类型</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.ext}}</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">创建时间</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.mtime}}</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">添加时间</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.btime}}</div>
								</van-col>
							</van-row>
							<van-row class="basic">
								<van-col span="12">
									<div class="label">修改时间</div>
								</van-col>
								<van-col span="12">
									<div class="record">{{imagesData.dateline}}</div>
								</van-col>
							</van-row>
						</div>
					</div>
				</div>
				
			</div>
		</van-popup>
	</div>
</div>
<script type="text/javascript">
	new Vue({
		el: '#dzzoffice',
		data: function() {
			return {
				imagesData: {
					rid : '$resourcesdata[rid]',
					appid : '$resourcesdata[appid]',
					name : '$resourcesdata[name]',
					type : '$resourcesdata[type]',
					ext : '$resourcesdata[ext]',
					height : $resourcesdata[height],
					width : $resourcesdata[width],
					dateline : '$resourcesdata[dateline]',
					grade : $resourcesdata[grade],
					mtime : '$resourcesdata[mtime]',
					btime : '$resourcesdata[btime]',
					colors : $resourcesdata[colors],
					desc : '$resourcesdata[desc]',
					link : '$resourcesdata[link]',
					tag :$resourcesdata[tag],
					opentype : '$resourcesdata[opentype]',
					icondata:'$resourcesdata[icondata]',
					iconwidth : $resourcesdata[iconwidth],
					iconheight : $resourcesdata[iconheight],
					share : $resourcesdata[share],
					download : $resourcesdata[download],
					originalimg : '$resourcesdata[originalimg]',
					realpath : '$resourcesdata[realpath]',
					fsize : '$resourcesdata[fsize]',
					foldernames :$resourcesdata[foldernames],
					dpath:'$resourcesdata[dpath]',
					footer:false
				},
				PopupInformation:false
			};
		},

		computed: {
	
		},
		created() {
			if(this.imagesData.link ||this.imagesData.share || this.imagesData.download){
				this.imagesData['footer'] =  true;
			}else{
				this.imagesData['footer'] = false;
			}
			if(this.imagesData.opentype=='video'){
				var ratio = parseFloat(this.imagesData.width)/document.body.clientWidth;
				var h = parseFloat(this.imagesData.height)/ratio;
				this.imagesData['videoH'] = h;
			}
		},
		methods:{
			DetailImgload(event){
				$(event.target).removeClass('opacity').siblings('.thumbnail').remove();
			},
			DetailFooterClick(type){
				var self = this;
				var rid = self.imagesData.rid;
				if(type == 'link'){
					window.open(self.imagesData.link);
					return false;
				}
				if(type == 'download'){
					if (self.imagesData.dpath) {
						window.open(SITEURL + MOD_URL + '&op=download&dpath=' + self.imagesData.dpath)
					} else {
						self.$toast({
						  message: '数据错误',
						  icon: 'cross',
						});
					}
					return false;
				}
				if(type == 'share'){
					if (self.imagesData.rid) {
						$.post('{MOD_URL}&op=ajax&operation=createshare', {
							rid: self.imagesData.rid
						}, function(data) {
							if (data.success) {
								self.$dialog.confirm({
									title: '分享成功',
									message: data.success,
									confirmButtonText:'复制地址',
									cancelButtonText:'关闭'
								}).then(function() {
									self.CommonCopyTxt(data.success);
								}).catch(function() {
								    // on cancel
								 });
							} else {
								self.$toast({
								  message: '分享失败',
								  icon: 'cross',
								});
							}
						}, 'json')
					} else {
						self.$toast({
						  message: '数据错误',
						  icon: 'cross',
						});
					}
				}
			},
			CommonCopyTxt(text){
				var self = this;
				var input = document.createElement('input'); input.setAttribute('id', 'copyInput');
				input.setAttribute('value', text);
				document.getElementsByTagName('body')[0].appendChild(input);
				document.getElementById('copyInput').select();
				document.execCommand('copy');
				document.getElementById('copyInput').remove();
				self.$toast.success('复制成功');
			}
		},
		mounted() {
		}
	});
</script>
<!--{template mobile/frame/footer_simple}-->
